<template>
    <view class="goddessSpace">
        <!--暂无数据显示-->
        <placeholder wx:if="{{is_empty}}" message.sync="暂无发现数据"></placeholder>
        <view @tap="urlTo('/pages/commodity/commodityDetails')" data-goodsId="{{item.id}}" wx:if="{{!is_empty}}" class='appraisalList_list' wx:for="{{List}}" wx:key="item">
            <view class='appraisalList_pd'>
                <view class='appraisalList_img'>
                    <image src='{{item.topicImage}}'></image>
                </view>
                <view class='tradeName'>{{item.name}}</view>
                <view class='price'>
                    <view>
                        <text>￥{{item.amount}}</text>
                    </view>
                    <view>
                        <text>{{item.sumPay}}人付款</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import wepy from 'wepy';
    import tip from '@/utils/tip'
    import api from '@/api/api';
    import Placeholder from "../../components/common/placeholder"
    import {
        USER_INFO, USER_SPECICAL_INFO
    } from '@/utils/constant';

    export default class richSpace extends wepy.page {
        config = {  // 配置当前页面

            navigationBarTitleText: '流行爆款'    // 头部标题
        };

        components = {
            placeholder: Placeholder
        }

        data = {
            List:[],
            form:{
                page:1,
                limit:10
            },
            page_total:'',
            is_empty:false
        };

        methods = { // 方法
            urlTo(url,e){
                wx.navigateTo({
                    url:url+'?id='+e.currentTarget.dataset.goodsid
                })
            }
        };

        onLoad() {
            const t = this;
            t.csLoad();
        }
        events = {};
        async getChildCate(type) {
            const t = this;
            const a = await api.goodsSearch({
                query:t.form
            });
            if (a.data.code == 0) {
                t.page_total = Math.ceil(a.data.data.total/t.form['limit']);
                t.form['page'] = a.data.data.page;
                if(type){
                    t.List = [...t.List, ...a.data.data.rows];
                }else {
                    t.List = a.data.data.rows;
                }
                if(t.List.length>0){
                    t.is_empty = false;
                }else {
                    t.is_empty = true;
                }
                t.$apply();
            } else {
                tip.error(a.data.msg);
            }
        }
        async csLoad() {
            const t = this;
            const b = await api.goodsCateSearchMain();
            let i = 0;
            b.data.data.forEach((k)=>{
                if(k.name === "流行爆款"){
                    i++;
                    t.form['params["categoryId"]'] = k.id;
                    this.getChildCate();
                }
            });
            if(i===0){
                t.is_empty = true;
            }
            t.$apply();
        }
        //加载更多
        onReachBottom() {
            let that = this;
            that.showLoading = true;
            if (that.page_total > that.form['page']) {
                that.form['page']++;
                that.getChildCate(1);
            } else {
                that.showLoading = false;
            }
        }
    }

</script>
<style lang="less">
    .goddessSpace{
        overflow: hidden;
        .appraisalList_list:nth-child(2n+1){
            margin-right: 2%;
        }
        .appraisalList_list{
            margin-top: 2%;
            background: #fff;
            width: 49%;
            float: left;
            .appraisalList_pd:nth-child(2n+1){
                margin-right: 2%;
            }
            .appraisalList_pd{
                padding-top: 20rpx;
                .state{
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .appraisalList_img{
                    position: relative;
                    width: 325rpx;
                    height: 325rpx;
                    margin: 0 auto;
                    image{
                        width: 100%;
                        height: 100%;
                    }
                }
                .tradeName{
                    width: 325rpx;
                    padding-top: 20rpx ;
                    margin: 0 auto;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .price{
                    overflow: hidden;
                    padding: 20rpx;
                    view:first-child{
                        text-align: left;

                    }
                    view:last-child{
                        text-align: right;
                    }
                    view{
                        float: left;
                        width: 50%;
                    }

                }
            }

        }
    }
</style>
